<template>
  <div id="div1">
    <p><span>角色信息</span></p>
    <hr />
    <el-form
      :model="ruleForm"
      :rules="rules"
      :inline="true"
      ref="ruleForm"
      border
      label-width="150px"
      class="demo-ruleForm"
      ><el-row type="flex" class="row-bg">
        <el-col :span="10">
          <el-form-item label="角色名称" prop="Rolename" label-width>
            <el-input v-model="ruleForm.Rolname"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="角色说明" prop="Roledes">
            <el-input v-model="ruleForm.description"> </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <p><span>权限配置</span></p>
    <hr />
    <div id="div2">
      <el-row>
      <el-col :span="6"><el-checkbox>首页</el-checkbox></el-col>
    </el-row>
    <el-row>
      <el-col :span="6"><el-checkbox
            :indeterminate="isIndeterminate1"
            v-model="checkAll1"
            @change="handleCheckAllChange1"
            >申报审批管理</el-checkbox
          >
      </el-col>
      <el-col :span="6" id="el-col1"><el-checkbox-group
            v-model="checkedCities1"
            @change="handleCheckedCitiesChange1"
          >
            <el-checkbox v-for="city in cities1" :label="city" :key="city">{{
              city
            }}</el-checkbox>
          </el-checkbox-group></el-col>
    </el-row>
    <el-row>
      <el-col :span="6"><el-checkbox
            :indeterminate="isIndeterminate2"
            v-model="checkAll2"
            @change="handleCheckAllChange2"
            >专技人员管理</el-checkbox
          ></el-col>
      <el-col :span="6"> <el-checkbox-group
            v-model="checkedCities2"
            @change="handleCheckedCitiesChange2"
          >
            <el-checkbox v-for="city in cities2" :label="city" :key="city">{{
              city
            }}</el-checkbox>
          </el-checkbox-group></el-col>    
    </el-row>
    </div>
    <div id="div3">
      <el-button @click="preservation">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </div>
</template>
<script>
const cityOptions1 = [
  "职称申报审批",
  "专技人员注册",
  "专技人员迁入",
  "专技人员迁出",
];
const cityOptions2 = ["专技人才信息"];

export default {
  data: function () {
    return {
      checkAll1: false,
      checkAll2: false,
      checkedCities1: [],
      checkedCities2: [],
      cities1: cityOptions1,
      cities2: cityOptions2,
      isIndeterminate1: false,
      isIndeterminate2: false,
      tableData: [
        {
          home: "",
          Application: "",
          Management: "",
        },
      ],
      ruleForm: {
        Rolname: "",
        Roledes: "",
      },
      rules: {
        Rolename: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleCheckAllChange1(val) {
      this.checkedCities1 = val ? cityOptions1 : [];
      this.isIndeterminate1 = false;
    },
    handleCheckedCitiesChange1(value) {
      let checkedCount1 = value.length;
      this.checkAll1 = checkedCount1 === this.cities1.length;
      this.isIndeterminate1 =
        checkedCount1 > 0 && checkedCount1 < this.cities1.length;
    },
    handleCheckAllChange2(val) {
      this.checkedCities2 = val ? cityOptions2 : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange2(value) {
      let checkedCount2 = value.length;
      this.checkAll2 = checkedCount2 === this.cities2.length;
      this.isIndeterminate2 =
        checkedCount2 > 0 && checkedCount2 < this.cities2.length;
    },
    get3() {
      alert(1);
    },
    //保存
    preservation() {
      //保存成功跳转回管理员管理页面
      this.$router.push({ path: "SystemManagement", name: "SystemManagement" });
      // this.$axios({
      //   url: "",
      //   method: "post",
      //   data: {
      //     con: this.con,
      //   //   user: sessionStorage.getItem("user"),
      //     name:this.user
      //   },
      // }).then((res) => {
      //   console.log(res);
      //   if (res.data.code == 500) {
      //     this.$message.error("保存失败！");
      //   } else {
      //     this.$message.success(保存成功！");
      //   }
      //   this.con = "";
      // });
    },
    //取消
    cancel() {
      this.$router.push({ path: "SystemManagement", name: "SystemManagement" });
    },
  },
  mounted(){
    sessionStorage.setItem('fNanme','AddSystemManagement')
  }
};
</script>
<style lang="less" scoped>
#div1 {
  width: 90%;
  height: 550px;
  margin-top: 20px;
  background: #f7f7f7;
  hr {
    width: 95%;
    margin: auto;
  }
  p {
    height: 40px;
    span {
      margin-left: 50px;
      line-height: 40px;
      font-weight: 400;
      font-style: normal;
      font-size: 18px;
      color: rgb(153, 153, 153);
    }
  }

  .el-form {
    width: 90%;
  }
  .el-form-item {
    margin: 10px;
  }
}
#div2>.el-row{
  height:100px;
  width: 90%;
  margin: 0 auto;
  border-bottom: 2px solid #ebeef5;
  .el-col{
    margin-top: 25px;
    margin-left: 40px;
  }
}
#div3 {
  width: 90%;
  margin-top: 25px;
  text-align: center;
}
</style>